<html>
  <head>
    <title>Shine Demo</title>
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:800" rel="stylesheet" type="text/css">
    <link href="css/demo.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../dist/shine.min.js"></script>
  </head>
  <body>

    <div id="headline" class="demo-text">
      <img src="http://placehold.it/300x300/ffcc99">
      <img src="http://placehold.it/300x300/ccff99">
      <img src="http://placehold.it/300x300/cc99ff">
    </div>

    <script type="text/javascript">
      // use new shinejs.Shine(...) if Shine is already defined somewhere else
      // var shine = new shinejs.Shine(document.getElementById("headline"));
      var shine = new Shine(document.getElementById('headline'));

      function update() {
        window.requestAnimationFrame(update);
        var time = new Date().getTime();
        var speed = 0.00025;  // 1 = 1000 rotations/s
        var phase = time * speed * 2.0 * Math.PI;
        var radiusX = window.innerWidth * 0.5;
        var radiusY = window.innerHeight * 0.5;
        shine.light.position.x = radiusX + radiusX * Math.cos(phase);
        shine.light.position.y = radiusY + radiusY * Math.sin(phase * 0.7);
        shine.draw();
      }

      update();
    </script>
  </body>
</html>
